<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="title d-flex-middle">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30"></text></view>
				<view v-if="!isAPP" class="srch d-flex d-flex-middle pl-2 position-absolute" style="left: 65rpx; width: 60%;">
					<text class="iconfont icon-sousuo colorblue position-absolute"  style="left: 40rpx;"></text>
					<input type="text" @input="handleInput" @confirm="handleSearch" :value="inputText" placeholder="请输入关键字"/>
					<view class="font24 ml-2" style="color: #212121;"  @click="handleSearch">搜索</view>
				</view>
				<view v-if="isAPP" class="srch d-flex d-flex-middle pl-2 position-absolute" style="left: 65rpx; width: 82%;">
					<text class="iconfont icon-sousuo colorblue position-absolute"  style="left: 40rpx;"></text>
					<input type="text"  @input="handleInput"  @confirm="handleSearch" :value="inputText" placeholder="请输入关键字"/>
					<view class="font24 ml-3" style="color: #212121;"  @click="handleSearch">搜索</view>
				</view>
			</view>
			<view class="bg-fff pb-2 tab" style="border-bottom: 1px solid rgba(204, 204, 204, .2);">
				<view class="d-flex d-flex-middle mt-2 ml-3">
					<view @click="changeTab(dex)" style="width: 100rpx;" class="text-center" :class="currentTab === dex? 'currentTabSty' : ''" v-for="(tab, dex) in TabList" :key="tab">{{tab}}</view>
				</view>
				<view class="rounded15" :style="[{transform: 'translate('+DistanceX+'rpx)'}]" style="margin-left: 68rpx; width: 25rpx; height: 6rpx; background: #6ed2f4; margin-top: 3px; transition: transform 0.3s ease;"></view>
			</view>
		</view>
		<swiper class="swiper" :current="currentTab" duration="300" @animationfinish="onAnimationfinish" style="min-height: 100vh;" :style="[{height: swiperHeight + 'px'},{paddingTop: SwiperPaddingTop + 'px'}]">
			<swiper-item>
				<view class="swiper-item0">
					<view class="item" v-for="(user,index) in users" :key="index">
						<view class="info" @click="user1(user.uid)">
							<view class="icon">
								<image v-bind:src="user.avatar" class="img-bg-img" mode="aspectFill"></image>
								<image v-if="user.dressedVoMap && user.dressedVoMap['1']" class="avatar-frame" :src="user.dressedVoMap['1'].icon"></image>
							</view>
							<view class="detailed">
								<view class="horizontal-container">
								<view class="name">{{user.nickname}}</view>
								<view class="sex ml-1" style="width: 30rpx; height: 30rpx; margin-bottom: 10rpx; ">
									<image v-if="user.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"  style="width: 100%; height: 100%;"></image>
									<image v-if="user.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"  style="width: 100%; height: 100%;"></image>
								</view>
								</view>
								<view class="desc">粉丝：{{user.fansCount}}</view>
								<view class="desc">小搭账号： {{user.accountId}}</view>
							</view>
						</view>
						<view class="btn" v-if="user.uid !== $store.state.user.uid" @click.stop="concernUser(index, 0)">{{user.concernFlag?"已关注":"关注"}}</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item1">
					<view class="mb-1 px-3 py-3" v-for="(i, index) in blogs" :key="i.id" @click="liulan(i.id,i)">
						<view class="d-flex d-flex-middle d-flex-between mb-1" style="flex: 1">
							<view class="d-flex d-flex-middle" @click.stop="user(i.uid)">
								<view class="position-relative img-bg d-flex d-flex-center d-flex-middle mr-1">
									<image v-bind:src="i.avatar" class="img-bg-img" mode="aspectFill"></image>
									
									 <image v-if="i.dressedVoMap && i.dressedVoMap['1']" class="avatar-frame2" :src="i.dressedVoMap['1'].icon"></image>
								</view>
								<view>
									<view class="d-flex">
										<view class="font30 d-flex">
											<view class="m-1">
												{{i.nickName}}
											</view>
											<view class="d-flex-btn" style="">
													<image v-if="i.accountType==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png" style="    width: 88rpx;height: 32rpx;"></image>
													<image v-if="i.accountType==3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png" style="    width: 88rpx;height: 32rpx;"></image>
											</view>
											<view class="sex ml-1 " style="width: 30rpx; height: 30rpx; margin-top: 5rpx;">
												<image v-if="i.gender === 1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png" style="width: 100%; height: 100%;"></image>
												<image v-if="i.gender === 2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png" style="width: 100%; height: 100%;"></image>
											</view>
										</view>
									</view>
									<view class="ml-1 font24 color71">{{i.time}} {{i.ipProvince? '· ' + i.ipProvince.slice(0, 2) : '· 未知'}}</view>
								</view>
							</view>
							<view class="d-flex d-flex-middle" >
								<view v-if="i.uid == $store.state.user.uid" ></view>
								<view v-else class="py-1 px-2 font26 rounded30 mr-2" :class="{'bg-main': !i.concernFlag, 'bg-grey': i.concernFlag, 'colorfff': !i.concernFlag, 'color-grey': i.concernFlag}" @click.stop="i.concernFlag ? null : concernUser(index, 1)">{{i.concernFlag?"已关注":"关注"}}</view>
								<view class="position-relative z-index-10">
									<text class="iconfont icon-gengduo" style="font-size: 37rpx;" @click.stop="openMorePopup(i)"></text>
								</view>
							</view>
						</view>
						<view class="pb-2 d-flex d-flex-column" style="padding-left: 120rpx;">
							<view class="font26 mb-2">
								<view class="mb-1">{{i.remark}}</view>
								<view class="topic-list" v-if="i.topicNames">
									<view v-for="topic in i.topicNames.split(',')" 
										   :key="topic.id" 
										   class="mr-1">
									<view class="topic-content px-2 py-1" @click.stop="toTag2(topic)">
										<text class="topic-hash">#</text>
										<text class="topic-name">{{topic}}</text>
									</view>
									</view>
								</view>
							</view>
							<view class=" mb-2 d-flex d-flex-column">
								<view class="d-flex  d-flex-middle mb-2" v-if="i.screenshot1">
									<image  v-if="i.screenshot1"
											:src="i.screenshot1"
											@load="ImgSize($event, index)"
											@click.stop="previwImage(index,0)"
											:class="[
												'rounded15',
												{
													'singlePic': !i.screenshot2 && !i.screenshot3,
													'MorePic': i.screenshot2 && !i.screenshot3,
													'threePic': i.screenshot2 && i.screenshot3
												}
											]"
											:mode="!i.screenshot2 ? 'aspectFill' : 'aspectFill'"
											:style="[{maxWidth: i.isLongChart && i.screenshot2 ? '420rpx' : '550rpx'}]"
									></image>
									<image  :class="['rounded15', 'ml-1', i.screenshot2&&!i.screenshot3? 'MorePic' : 'threePic']"
											v-if="i.screenshot2" 
											:src="i.screenshot2" 
											mode="aspectFill"
											@click.stop="previwImage(index,1)"
									></image>
									<image   :class="['rounded15', 'ml-1', 'mr-2', i.screenshot3? 'threePic' : '']" 
											v-if="i.screenshot3" 
											:src="i.screenshot3" 
											mode="aspectFill"
											@click.stop="previwImage(index,2)"
									></image>
								</view>
								<!-- <view class="aixin rounded30 px-1 py-1 d-flex d-flex-middle" @click.stop="gotoPromotion(i)">
									<text class="iconfont icon-aixin_shixin mr" style="color: #FF6C00;"></text>
									<text class="font24">上热门</text>
								</view> -->
							</view>
							<view class="d-flex d-flex-middle pr-3 d-flex-between">
								<image class="ml-1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%BD%AC%E5%8F%91.png" @click.stop="share(i)" mode="widthFix" style="width: 26rpx; height: 26rpx;"></image>
								<view class="d-flex d-flex-middle" @click.stop="dianzan(index)">
									<image v-if="i.favorFlag" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/heart-3-fill.png" style="width: 35rpx; height: 35rpx;"></image>
									<text v-else class="iconfont icon-aixin1 color6d"></text>
									<text class="color71 font26 ml-1">{{i.favorCount}}</text>
								</view>
								<view class="d-flex d-flex-middle" @click.stop="gotoDetail(i)">
									<text class="iconfont icon-pinglun color6d"></text>
									<text class="color71 font26 ml-1">{{(i.totalCommentCount&&i.totalCommentCount!=0)? i.totalCommentCount : ''}}评论</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2">
					<view @click="toTags(dex)" class="d-flex d-flex-middle py-2" v-for="(tipic, dex) in topics" :key="topics.id" style="width: 666rpx; margin: 0 auto;">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/topic-b.png" class="mr-3" style="width: 70rpx; height: 70rpx;"></image>
						<view class="font-bold" style="border-bottom: 1px solid rgba(204, 204, 204, .2); flex: 1; height: 90rpx; line-height: 90rpx;">{{tipic.name}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="text-center">{{loading}}</view>
		<uni-popup type="bottom" ref="morePopup" background-color="#fff" border-radius="16px 16px 0 0 " style="z-index: 10;">
			<view class="popup-content pt-4">
				<view class="d-flex d-flex-middle ml-3 mt-2" @click="collect(i)">
					<image v-if="morePopupData.collectFlag" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%94%B6%E8%97%8F.png"  mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<image v-else src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241209161617.png" mode="heightFix" style="height: 40rpx; width: 40rpx;"></image>
					<text  v-if="!morePopupData.collectFlag" class="font32 ml-2">收藏</text>
					<text v-else class="font32 ml-2">取消收藏</text>
				</view>
				<view class="d-flex mt-2 ml-2 d-flex-middle ml-3 mb-4 mt-4" @click="gotoReportPage(morePopupData.id)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png" mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
					<text class="font32 ml-2">举报</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff" position: fixed  border-radius="8px 8px 0 0" z-index="10" >
			<view class="my-4 text-center">分享到</view>
			<view class="d-flex d-flex-between px-5 mb-4 bot" >
				<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png" style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">微信</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png" style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png" style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
				</view>
				<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
					<image class="rounded" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" style="width: 60rpx; height: 60rpx;"></image>
					<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
				</view>
			</view>
		</uni-popup>
		<view v-if="content" class="font30 " style="margin-left: 50rpx; margin-top: 20rpx;">暂时没有搜索到内容</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { blogApi } from '../../http/blogApi';
	import { TaskApi } from '../../http/taskApi';
	import { userApi } from '../../http/userApi';
	export default {
		data() {
			return {
				isAPP: '',
				inputText: '',
				param: {
					max: false,
					pageIndex: 1,
					pageSize: 12
				},
				topicParams: {
					max: false,
					pageIndex: 1,
					pageSize: 15
				},
				blogParams: {
					max: false,
					pageIndex: 1,
					pageSize: 3
				},
				morePopupData: {
					collectFlag: 0
				},
				shareData: {
					href: "https://www.168802.xyz",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				},
				concernParam: {
					bindFlag: true,
					fromUid: '',
					toUid: '',
					type: 2
				},
				morePopupData: {
					collectFlag: 0
				},
				users: [],
				topics: [],
				blogs: [],
				imgs: [],
				content: '',
				loading: '加载中...',
				DistanceX: 0,
				DistanceTop: 0,
				currentTab: 0,
				swiperHeight: 0,
				SwiperPaddingTop: 0,
				TabList:['搭友','动态','话题']
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
				this.isAPP = false;
			//#endif
			//#ifdef APP
				this.isAPP = true;
			//#endif
			this.concernParam.fromUid = this.$store.state.user.uid;
			this.search(this.param);
			this.setSwiperHeight()
			this.setSwiperPaddingTop()
		},
		onReachBottom() {
			if(this.currentTab === 0) {
				if(!this.param.max) {
					this.param.pageIndex++
					this.search();
				}
			}
			if(this.currentTab === 1) {
				if(!this.blogParams.max) {
					this.blogParams.pageIndex++
					this.queryblog()
				}
			}
			if(this.currentTab === 2) {
				if(!this.topicParams.max) {
					this.topicParams.pageIndex++
					this.TopicListData()
				}
			}
		},
		methods: {
			// 切换tab栏的时执行的动作
			changeTab(dex) {
				if(dex === this.currentTab) {
					return
				}
				this.currentTab = dex
				this.DistanceX = this.currentTab * 100
				if(this.currentTab !== 2) {
					if(this.inputText !== "") {
						this.topics = []
						this.topicParams.max = false
						this.topicParams.pageIndex = 1
						delete this.topicParams.name
						this.TopicListData();
					}
				}
				this.inputText = ""
				this.$nextTick(async () => {
					await new Promise(resolve => setTimeout(resolve, 100));
					await this.setSwiperHeight();
				});
				this.$nextTick(async () => {
					await new Promise(resolve => setTimeout(resolve, 100));
					await this.setSwiperPaddingTop();
				});
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				if(this.currentTab === 1) {
					if(this.blogs.length === 0) {
						this.queryblog()
					}
					if(!this.blogParams.max) {
						this.loading = '加载中...'
					}
				}
				if(this.currentTab === 2) {
					if(this.topics.length === 0) {
						this.TopicListData()
					}
					if(!this.topicParams.max) {
						this.loading = '加载中...'
					}
				}
			},
			// swiper动画执行完后的动作
			onAnimationfinish(event) {
				this.changeTab(event.detail.current)
			},
			// 后退一步
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//点击头像进入个人页
			user1(uid) {
				if(uid==this.concernParam.fromUid){
					uni.switchTab({
						url: `/pages/user/user`
					});
				}else{
					 uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			// 判断是否实名
			 checkRealNaem(){
				// if(this.$store.state.user.realName==''||this.$store.state.user.realName==null){
				// 	return false					
				// }else{	
				// 	return true
				// }
				return true
			},
			// 关注
			concernUser(dex, type) {
				if(this.checkRealNaem()){
					if(type === 0) {
						let Params = {
							bindFlag: !this.users[dex].concernFlag,
							fromUid: this.$store.state.user.uid,
							toUid: this.users[dex].uid,
							type: 2
						}
						this.users[dex].concernFlag = !this.users[dex].concernFlag
						this.blogs.forEach(item => {
							if(item.uid === this.users[dex].uid) {
								item.concernFlag = !item.concernFlag
							}
						})
						this.concern(Params)
					} else {
						let Params = {
							bindFlag: !this.blogs[dex].concernFlag,
							fromUid: this.$store.state.user.uid,
							toUid: this.blogs[dex].uid,
							type: 2
						}
						this.blogs.forEach(i => {
							if(i.uid === this.blogs[dex].uid){
								i.concernFlag = true
							}
						})
						this.users.forEach(item => {
							if(item.uid === this.blogs[dex].uid) {
								item.concernFlag = !item.concernFlag
							}
						})
						this.concern(Params)
					}
				}else{
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {  
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
				}	
			},
			async concern(Params) {
				let res = await userApi.relation(Params);
				if(Params.bindFlag) {
					this.addFriend(Params.toUid)
					this.getTaskList(19);
				} else {
					this.deleteFriend(Params.toUid)
				}
			},
			// 添加朋友
			addFriend(uid){
				let that = this
				that.$tim.addFriend({
					to: uid,
					source: 'AddSource_Type_App',
					type: 'Add_Type_Both',
				}).then((imResponse) => {
					const { code } = imResponse.data;
					if (code === 30539) {
					} else if (code === 0) {
						console.log('添加好友成功！')
					}
				}).catch((imError) => {
					console.warn('addFriend error:', imError);
				});
			},
			// 删除好友
			deleteFriend(uid) {
				let that = this
				let userIDList = []
				userIDList.push(uid)
				let promise = that.$tim.deleteFriend({
					userIDList: userIDList,
					type: 'Delete_Type_Both'
				});
				promise.then(function(imResponse) {
					const { successUserIDList, failureUserIDList } = imResponse.data;
					// 删除成功的 userIDList
					successUserIDList.forEach((item) => {
						const { userID } = item;
					});
					// 删除失败的 userIDList
					failureUserIDList.forEach((item) => {
						const { userID, code, message } = item;
					});
					// 如果好友列表有变化，则 SDK 会触发 TencentCloudChat.EVENT.FRIEND_LIST_UPDATED 事件
				}).catch(function(imError) {
					console.warn('removeFromFriendList error:', imError);
				});
			},
			// 点击搜索按钮执行的动作
			handleSearch(){
				if(this.inputText === '') {
					uni.showToast({
						icon: 'none',
						title: '您暂未输入关键字哦~',
						duration: 1500
					})
					return
				}
				if(this.currentTab === 0) {
					this.param.pageIndex = 1
					// 是否是全数字
					if (/^\d+$/.test(this.inputText)) {
						delete this.param.nickname;
						this.param.id = this.inputText;
						this.users = [];
						this.search(this.param);
					} else {
						delete this.param.id;
						this.param.nickname = this.inputText;
						this.users = [];
						this.search(this.param);
					}
				}
				if(this.currentTab === 1) {
					this.blogParams.pageIndex = 1
					this.blogParams.remark = this.inputText
					this.blogs = []
					this.queryblog()
				}
				if(this.currentTab === 2) {
					this.topicParams.pageIndex = 1
					this.topicParams.max = false
					this.topicParams.name = this.inputText
					this.topics = []
					this.TopicListData()
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
				}
			},
			// 输入框内容变化的时候执行的动作
			handleInput(event) {
				this.inputText = event.detail.value;
				if(this.currentTab === 0) {
					if(this.inputText === ''){
						this.content = false;
						this.users = [];
						this.param.pageIndex = 1
						this.param.max = false
						delete this.param.nickname;
						delete this.param.id;
						this.search(this.param);
					} else {
						this.handleSearch()
					}
				}
				if(this.currentTab === 1) {
					if(this.inputText === '') {
						this.blogs = [];
						this.content = false;
						this.blogParams.pageIndex = 1
						this.blogParams.max = false
						delete this.blogParams.remark
						this.queryblog();
					} else {
						this.handleSearch()
					}
				}
				if(this.currentTab === 2) {
					if(this.inputText === '') {
						this.topics = [];
						this.content = false;
						this.topicParams.max = false
						this.topicParams.pageIndex = 1
						delete this.topicParams.name
						this.TopicListData();
					} else {
						this.handleSearch()
					}
				}
			},
			// 跳转到话题页面
			toTags(dex) {
				uni.navigateTo({
					url: `/pagesApp/topic/topic?topicId=${this.topics[dex].id}&topicName=${this.topics[dex].name}`
				})
			},
			async QueryTopic(topic) {
				let params = {
					pageIndex: 1,
					pageSize: 1,
					name: topic
				}
				let res = await blogApi.queryBlogTopicList(params);
				return res.records[0]
			},
			async toTag2(topic) {
				try {
					let result = await this.QueryTopic(topic)
					uni.navigateTo({
						url: `/pagesApp/topic/topic?topicId=${result.id}&topicName=${result.name}`
					})
				} catch (error) {
					console.error(error);
				}
			},
			// 搜索用户
			async search(param) {
				let res = await userApi.searchUser(this.param);
				const records = res.records;
				if(res.total == 0){
					this.content = true;
				}
				if(res.current*res.size >= res.total) {
					this.param.max = true
					setTimeout(() => {
						this.loading = '没有更多内容啦~'
					},500)
				}
				records.forEach(record => {
					this.users.push(record);
				})
				this.$nextTick(async () => {
					await new Promise(resolve => setTimeout(resolve, 100));
					await this.setSwiperHeight();
				});
				console.log(this.users);
			},
			// 查询动态
			async queryblog() {
				let res = await blogApi.queryBlogRecommend(this.blogParams);
				res.records.forEach(item => {
					this.blogs.push(item);
				})
				if(res.current*res.size >= res.total) {
					this.blogParams.max = true
					setTimeout(() => {
						this.loading = '没有更多内容啦~'
					},500)
				}
				this.$nextTick(async () => {
					await new Promise(resolve => setTimeout(resolve, 100));
					await this.setSwiperHeight();
				});
			},
			async getTaskList(taskid) {
				let params = {
					id: taskid
				}
				let res = await TaskApi.getTaskList(params)
				if(res.records[0].finishFlag) return
				if(!res.records[0].receiveFlag) {
					this.receiveTask(taskid).then(() => {
						this.finishTask(taskid);
					})
				} else {
					this.finishTask(taskid);
				}
			},
			async receiveTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.ReceiveTask(params)
				console.log('领取完成！');
			},
			async finishTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.FinishTask(params);
				console.log('任务完成！');
			},
			// 查询话题
			async TopicListData() {
				let res = await blogApi.queryBlogTopicList(this.topicParams);
				res.records.forEach(item => {
					this.topics.push(item);
				})
				if(res.current*res.size >= res.total) {
					this.topicParams.max = true
					setTimeout(() => {
						this.loading = '没有更多内容啦~'
					},500)
				}
				this.$nextTick(async () => {
					await new Promise(resolve => setTimeout(resolve, 100));
					await this.setSwiperHeight();
				});
			},
			// 设置图片尺寸
			ImgSize(event, id) {
				if(event.target.width > event.target.height) { // 横图
					this.blogs[id].isLongChart = 0
				}
			},
			// 图片预览
			previwImage(id, index) {
				if(this.blogs[id].screenshot1) {
					this.imgs.push(this.blogs[id].screenshot1)
				}
				if(this.blogs[id].screenshot2) {
					this.imgs.push(this.blogs[id].screenshot2)
				}
				if(this.blogs[id].screenshot3) {
					this.imgs.push(this.blogs[id].screenshot3)
				}
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.imgs,// 需要预览的图片http链接列表
				});
				this.imgs = []
			},
			// 打开更多面板弹窗
			openMorePopup(i) {
				this.morePopupData = i
				this.$refs.morePopup.open('bottom')
			},
			// 设置轮播图高度
			setSwiperHeight() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.swiper-item'+this.currentTab).boundingClientRect(data => {
						this.swiperHeight = data.height
					}).exec()
				}, 300)
			},
			// 设置轮播图上边距
			setSwiperPaddingTop() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.tab').boundingClientRect(data => {
						this.SwiperPaddingTop = data.height + data.top
					}).exec()
				}, 300)
			},
			// 分享
			share(item) {
				this.shareData.summary = item.remark
				this.shareData.imageUrl = item.screenshot1
				this.$refs.share.open('bottom')
			},
			// 分享
			OnShare(type) {
				let that = this
				if(type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type===1? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							console.log(failData);
							if(failData.code == -8) {
								uni.showToast({
									title: '客户端未安装',
									icon: 'none',
									duration: 1500
								})
							} else if(failData.code == -100) {
								console.log('客户端安装了，但是没有登录，用户返回后的状态');
							} else {
								uni.showToast({
									title: failData,
									icon: 'none',
									duration: 1500
								})
							}
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type===3? 'WPA' : 'QZONE',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							if(failData.code == -2) {
								return
							}
							uni.showToast({
								title: failData,
								icon: 'none',
								duration: 1500
							})
						}
					});
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
				if(type === 5) {
					uni.showToast({
						title:'此功能暂未开发！',
						icon:'none',
					})
					that.$refs.share.close()
					setTimeout(() => {
						uni.showTabBar()
					},250)
				}
			},
			// 点赞 / 取消点赞
			async dianzan(dex) {
				const param = {
					blogId: this.blogs[dex].id,
					flag: !this.blogs[dex].favorFlag,
					type: 1
				};
				let res = blogApi.dianzanBlog(param);
				this.blogs[dex].favorFlag = !this.blogs[dex].favorFlag;
				if(this.blogs[dex].favorFlag) {
					this.blogs[dex].favorCount++
				} else {
					this.blogs[dex].favorCount--
				}
			},
			// 跳转到详情页
			gotoDetail(item) {
				let data = JSON.stringify(item)
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data='+data
				})
			},
			// 浏览
			async liulan(id,item) {
				let param = {
					blogId: id,
					flag: true,
					type: 3
			    }
				let res = await blogApi.dianzanBlog(param);
				let data = JSON.stringify(item);
				uni.navigateTo({
					url: '/pagesMain/detail/detail?data='+data
				})
			},
			// 收藏 / 取消收藏
			async collect() {
				let params = {
					type: 2,
					flag: this.morePopupData.collectFlag? false : true,
					blogId: this.morePopupData.id
				}
				this.morePopupData.collectFlag = this.morePopupData.collectFlag? false : true
				let res = await blogApi.LikeAndComment(params)
				this.$refs.morePopup.close()
			},
			// 跳转至举报页
			gotoReportPage() {
				this.$refs.morePopup.close()
				uni.navigateTo({
					url: "/pagesMain/ReportPage/ReportPage?type=3&idRef="+this.morePopupData.id
				})
			},
			//点击头像进入个人页
			user(uid) {
				if(uid==this.$store.state.user.uid) {
					uni.switchTab({
						url: `/pages/user/user`
					});
				} else {
					uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			// 上热门
			gotoPromotion(item) {
				uni.navigateTo({
					url: '/pagesApp/Promotion/Promotion?data='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 700rpx;
		height: 150rpx;
		margin: 15rpx auto;
		border-bottom: 1px solid rgba(204, 204, 204, .2);
		display: flex;
		align-items: center;
		justify-content: space-between;
		.info {
			display: flex;
			margin-left: 20rpx;
			.icon {
				position: relative;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				.sex {
					position: absolute;
					bottom: 7rpx;
					right: 0rpx;
					
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.horizontal-container {
			  display: flex;
			  flex-direction: row;
			  align-items: center; /* 垂直居中 */
			 
			}
			.detailed {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.name {
					color: #231815;
					font-weight: 700;
					font-size: 30rpx;
					text-align: left;
				}
				.desc {
					color: #595757;
					font-size: 22rpx;
					text-align: left;
				}
			}
		}
		.btn {
			width: 150rpx;
			height: 60rpx;
			border-radius: 30rpx;
			color: #fff;
			margin-right: 20rpx;
			background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 21.23rpx;
				height: 20.16rpx;
			}
		}
	}
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
		.title {
			display: flex;
			align-items: center;
			font-weight: 700;
			height: 80rpx;
			.goback {
				image {
					margin-left: 50rpx;
					margin-bottom: 2rpx;
					width: 20rpx;
					height: 30rpx;
				}
			}
			.srch {
				input {
					background-color: #f4f5fa;
					flex: 1;
					height: 62rpx;
					padding-left: 60rpx;
					border-radius: 50rpx;
					font-size: 22rpx;
					color: #9da4ae;
					font-weight: normal;
				}
			}
		}
	}
	.currentTabSty {
		font-weight: bold;
	}
	/* 修改图片样式 */
	.singlePic {
	    width: 550rpx !important; /* 固定宽度 */
	    height: 382rpx !important; /* 固定高度 */
	    border-radius: 15rpx;
	}
	.threePic {
	    width: 200rpx;
	    height: 180rpx;
	}
	.MorePic {
	    width: 200rpx;
	    height: 200rpx;
	}
	.bg-grey {
	  background-color: #f3f2f2; /* 灰色背景 */
	}
	.img-bg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 120rpx;
		background-image: linear-gradient(to top, #fab452, #9d41d3);
	}
	.avatar-frame2 {
	  position: absolute;
	  top: -8rpx; /* 向上偏移 */
	   left: -10rpx; /* 向左偏移 */
	   width: 118rpx; /* 比头像大 20rpx */
	   height: 118rpx; /* 比头像大 20rpx */
	  z-index: 2;  /* 调整层级 */
	  pointer-events: none;
	}
	.avatar-frame {
	  position: absolute;
		left: -12rpx;
		top:-12rpx;
	   width: 133rpx !important; /* 比头像大 20rpx */
	   height: 133rpx !important; /* 比头像大 20rpx */
	  z-index: 2;  /* 调整层级 */
	  pointer-events: none;
	}
	.img-bg-img{
		height: 85rpx;
		width: 85rpx;
		border-radius: 100rpx;
		border: solid 5rpx #fff;
	}
	.aixin{
		background: #FFA5DF;
		width: 110rpx;
	}
	.topic-list {
	    margin-bottom: 10rpx;
	    display: flex;
	    flex-wrap: wrap;
	}
	.topic-content {
	    display: flex;
	    align-items: center;
		border-radius: 30rpx;
		background: #F0F7FF;
	}
	.topic-hash {
	    color: #18c3ff;
	    font-size: 28rpx;
	    margin-right: 2rpx;
	    font-weight: bold;
	}
	.topic-name {
	    font-size: 28rpx;
	    color:#999899;
	}
	.z-index-99 {
		z-index: 99;
	}
}
</style>